import React, { useEffect, useState } from 'react';
import { Form, Input, Table } from 'antd';
import './commentActivity.less';
import { history } from 'umi';
export default function () {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [allAmount, setallAmount] = useState(0);
  const [tableData, setTableData] = useState([
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 1,
    },
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 2,
    },
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 3,
    },
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 4,
    },
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 5,
    },
    {
      projectNumber: 'radeCode21',
      projectName: '名称',
      address: '杭州',
      functionary: '刘正圆',
      itemAmount: 100,
      startTime: '2022 - 5 - 1',
      serviceContent: '前端开发',
      serverType: '开发',
      condition: '启动',
      operator: '刘正圆',
      operationTime: '2022-5-2',
      key: 6,
    },
  ]);
  const columns = [
    {
      title: '项目编号',
      dataIndex: 'projectNumber',
      key: 'projectNumber',
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '负责人',
      dataIndex: 'functionary',
      key: 'functionary',
    },
    {
      title: '项目金额',
      key: 'itemAmount',
      dataIndex: 'itemAmount',
    },
    {
      title: '开始时间',
      key: 'startTime',
      dataIndex: 'startTime',
    },
    {
      title: '服务内容',
      key: 'serviceContent',
      dataIndex: 'serviceContent',
    },
    {
      title: '服务类型',
      key: 'serverType',
      dataIndex: 'serverType',
    },
    {
      title: '状态',
      key: 'condition',
      dataIndex: 'condition',
    },
    {
      title: '操作人',
      key: 'operator',
      dataIndex: 'operator',
    },
    {
      title: '操作时间',
      key: 'operationTime',
      dataIndex: 'operationTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      render: () => {
        return (
          <div style={{ display: 'flex' }}>
            <div
              style={{
                color: '#4ea3ff',
                cursor: 'pointer',
                marginRight: '5px',
              }}
            >
              停用
            </div>
            <div
              style={{
                marginRight: '5px',
                cursor: 'pointer',
                color: '#4ea3ff',
              }}
            >
              修改
            </div>
            <div
              style={{
                cursor: 'pointer',
                color: '#4ea3ff',
              }}
            >
              删除
            </div>
          </div>
        );
      },
    },
  ];

  // useEffect(() => {

  // }, [a]);

  const onSelectChange = (selectedRowKeys) => {
    let a = [...selectedRowKeys];
    console.log(a);
    setSelectedRowKeys(a);
    let b = 0;
    tableData.forEach((item) => {
      if (a.indexOf(item.key) !== -1) {
        b = item.itemAmount + b;
      }
    });
    console.log(b);
    setallAmount(b);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div>
      <Form>
        <div className="content-all">
          <div className="content-input">
            <Form.Item
              label="项目名称"
              name="projectName"
              style={{
                marginRight: '25px',
              }}
            >
              <Input placeholder="请输入项目名称" className="input-choose" />
            </Form.Item>
          </div>
          <div className="content-btn">
            <div className="btn1">查&nbsp;询</div>
            <div className="btn2">重&nbsp;置</div>
          </div>
        </div>
        <div
          className="btn3"
          onClick={() => {
            history.push({
              pathname: '/home/activityComment/addCreateProject',
            });
          }}
        >
          新建项目
        </div>
      </Form>

      <div>
        <div>{allAmount}</div>
        <Table
          pagination={false}
          columns={columns}
          dataSource={tableData}
          rowSelection={rowSelection}
        />
      </div>
    </div>
  );
}
